<template>
  <div class="customercardrefundinformation">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" size="mini" class="demo-ruleForm"
      style="display:flex;margin:0 0 0 59%">
      <el-form-item label="手机号" prop="phone">
        <el-input style="width:200px" v-model="ruleForm.phone"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">查询</el-button>
        <el-button type="primary" @click="Returpage">返回</el-button>
      </el-form-item>
    </el-form>
    <!-- 用户列表区 -->
    <el-table size="mini" :header-cell-style="{
          color: '#fff',
          background: '#6090EC',
          fontSize: '11px',
          fontWeight: 'normal',
        }" :data="Querydata" border stripe>
      <el-table-column label="姓名" prop="customerName" width="80px"></el-table-column> 
      <el-table-column label="卡号" prop="cardCode"></el-table-column>
      <el-table-column label="卡类型" prop="cardSettionname" width="130px"></el-table-column>
      <el-table-column label="手机号" prop="contractPhoneOne" width="110px"></el-table-column>
      <el-table-column label="开卡日期" prop="createDate"></el-table-column>
      <el-table-column label="过期时间" prop="invalidDate"></el-table-column>
      <el-table-column label="售卡部门" prop="departmentName"></el-table-column>
      <el-table-column label="售卡人" prop="employee" width="80px"></el-table-column>
      <el-table-column label="状态" prop="cardStatus" width="80px">
        <template slot-scope="scope">
          <p v-if="scope.row.cardStatus == 'frozen'">冻结</p>
          <p v-if="scope.row.cardStatus == 'refunds'">退还</p> 
          <p v-if="scope.row.cardStatus == 'valid'">已生效</p> 
        </template>
      </el-table-column>
      <!-- <el-table-column label="操作" width="100px">
        <template slot-scope="scope">
          <el-button @click="register(scope.row)" type="primary" size="mini">详情</el-button>
        </template>
      </el-table-column> -->
    </el-table>
  </div>
</template>
<script>
  import returnCard from "./returnCard.vue";
  export default {
    components: {
      returnCard
    },
    data() {
      return {
        rules: {
          phone: [{
            required: true,
            message: '请输入手机号进行查询',
            trigger: 'blur'
          }, ],
        },
        ruleForm: {
          phone: "",
        },
        //分页
        pageSize: 10,
        currentPage: 1,
        pageTotal: 0,
        // centerDialogVisible: false,
        fsadaf: {},
        Querydata: [],
      };
    },
    methods: {
      // 返回
      Returpage() {
        this.$router.push({
          name: "queryCustomer"
        })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.postcustomerReturnCardByPhone()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      // 详情按钮
      register(row) {
        console.log(row)
        this.$router.push({
          name: "customercardinformationDetails",
          params: {
            customerCardId: row.customerCardId
          }
        })
      },
      //调用接口
      postcustomerReturnCardByPhone() {
        this.$axios
          .postcustomerReturnCardByPhone({
            phone: this.ruleForm.phone,
            // id: 17338135336,
          })
          .then((res) => {
            console.log(res);
            if (res.code == "200") {
              this.Querydata = res.data;
              this.pageTotal = res.total;
              console.log(this.Querydata.tatle);
            }
          });
      },
    },
    mounted() {},
    created() {
      console.log(this.$route.params.phone)
      // debugger
        this.ruleForm.phone = this.$route.params.phone;
        if(this.ruleForm.phone!=''){
          this.postcustomerReturnCardByPhone()
        }
    },
  };
</script>
<style scoped>
  .customercardrefundinformation {
    margin: 20px;
  }
</style>